<template>
  <div class="SJdiv1">
    <div class="SJdiv2">
      <span
        style="
          font-size: 25px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #051232;
          line-height: 84px;
          margin-left: 10px;
        "
        >订单中心</span
      >
      <div class="con_boxs">
        <!-- 搜索 -->
        <div class="con_sousuo">
          <el-form
            :inline="true"
            :model="formWtzx"
            class="demo-form-inline"
            label-width="150px"
          >
           
            <el-form-item label="企业名称:">
              <el-input
                v-model="formWtzx.billNumber"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="承兑人名称:">
              <el-input
                v-model="formWtzx.acceptor"
                placeholder="承兑人名称"
              ></el-input>
            </el-form-item>
             <el-form-item label="界面金额:">
              <el-input
                v-model="formWtzx.billNumber"
                placeholder="请输入界面金额"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态:" >
              <el-select v-model="formWtzx.entrustStatus" placeholder="状态" style="width:186px">
                <el-option label="全部" value="0"></el-option>
                <el-option label="待确认" value="1"></el-option>
                <el-option label="已完成" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="已驳回" value="4"></el-option>
                <el-option label="已过期" value="5"></el-option>
              </el-select>
            </el-form-item>
              <el-form-item label="票据号:">
              <el-input
                v-model="formWtzx.billNumber"
                placeholder="请输入票据号"
              ></el-input>
            </el-form-item>
            <el-form-item style="position: initial; margin-left: 77px">
              <el-button type="primary" icon="el-icon-search" @click="weitList(formWtzx)"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="tb">
      <el-tabs
        v-model="formt.entrustStatus"
        @tab-click="handleClick"
        class="tbsa"
      >
        <el-tab-pane label="全部" name="0">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
            >
              <!-- 列表数据 -->
              <el-table-column prop="account" label="序号"> </el-table-column>
              <el-table-column prop="entrustTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="zhenjianleixin" label="承兑人名称">
              </el-table-column>
              <el-table-column prop="zhenjianhaoma" label="票面金额">
              </el-table-column>
              <el-table-column prop="zhuceziijin" label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >成交</el-button
                  >
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >驳回</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane label="待确认" name="1">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
            >
              <!-- 列表数据 -->
              <el-table-column prop="account" label="序号"> </el-table-column>
              <el-table-column prop="entrustTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptor" label="承兑人名称">
              </el-table-column>
              <el-table-column prop="zhenjianhaoma" label="票面金额">
              </el-table-column>
              <el-table-column prop="entrustEndTime" label="到期日">
              </el-table-column>
              <el-table-column prop="serviceCharge" label="交易价格(%)">
              </el-table-column>
              <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane label="已完成" name="3">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
            >
              <!-- 列表数据 -->
              <el-table-column prop="account" label="序号"> </el-table-column>
              <el-table-column prop="entrustBeginTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptor" label="承兑人名称">
              </el-table-column>
              <el-table-column prop="zhenjianhaoma" label="票面金额">
              </el-table-column>
              <el-table-column prop="entrustEndTime" label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane label="已驳回" name="4">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
            >
              <!-- 列表数据 -->
              <el-table-column prop="account" label="序号"> </el-table-column>
              <el-table-column prop="entrustBeginTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptor" label="承兑人名称">
              </el-table-column>
              <el-table-column prop="zhenjianhaoma" label="票面金额">
              </el-table-column>
              <el-table-column prop="entrustEndTime" label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane label="已过期" name="5">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
            >
              <!-- 列表数据 -->
              <el-table-column prop="account" label="序号"> </el-table-column>
              <el-table-column prop="entrustBeginTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptor" label="承兑人名称">
              </el-table-column>
              <el-table-column prop="zhenjianhaoma" label="票面金额">
              </el-table-column>
              <el-table-column prop="entrustEndTime" label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style >
</style>

<script>
import { querywt } from "@/api/leagues/app";
export default {
  data() {
    return {
      input: "", //搜索框
      formt: {
        entrustStatus: "",
      },
      formWtzx: {
        entrustBeginTime: "",
        entrustEndTime: "",
        billNumber: "",
        acceptor: "",
        entrustStatus: "",
      },
      // 列表
      tableData: [],
      // 分页
      page: {
        current: 1, //默认从第一页开始
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total:0,
      },
    };
  },
  mounted() {
    this.weitList();
  },
  //方法集合
  methods: {
    // 列表操作安钮
    handleClick(tab, event) {
      console.log(tab, "tab");
      console.log(event, "event");
      this.formt.entrustStatus = tab.name;
      this.weitList();
    },
    //列表this.formt
   
    weitList: function () {
       let params=this.formt
        let page=this.page
        let formWtzx=this.formWtzx
      querywt(
        Object.assign(
          {
            current: page.current,
            size: page.size,
          },
          params,formWtzx
        )
      ).then((response) => {
        if (response) {
          var that = this;
          that.tableData = response.data.data.records;
          this.page.size = response.data.data.size;
          this.page.current = response.data.data.current;
          this.page.total = response.data.data.total;
          // that.$message({
          //   duration:600,
          //   message:'查询成功',
          //   type:'success'
          // })
        } else {
          that.$message.success(response.msg);
        }
      });
    },
    // qureyForm: function () {
    //   querywt(this.formWtzx).then((response) => {
    //     if (response) {
    //       this.weitList();
    //     // this.$message.success("查询成功");
    //     } else {
    //       this.$message.success(response.msg);
    //     }
    //   //  that.$message.success(data.msg)
    //   });
    // },
    edits(row) {
      //详情
      // this.editNetWork = row;
      // this.editRowId = row.id;
      this.$router.push({
        path: "editWeit",
        query: { editRowId: row.id, editNetWork: row },
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style  scoped>
.SJdiv1 {
  width: 1200px;
  height: 850px;
  background: #ffffff;
  /* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06); */
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.tb {
  margin-left: 20px;
}
 .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 186px !important;
}
.tbsa {
  /* width: 902px; */
  height: 40px;

  border: 1px solid #bdc3ca;
  border-radius: 20px;
}

>>> .el-tabs__nav {
  /* width: 311px; */
  height: 40px;
  border-radius: 20px;
  text-align: center;
}
>>> .el-tabs__content {
  margin-top: 11px;
}
/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
>>> .el-tabs__active-bar {
  background-color: transparent !important;
}
>>> .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}
>>> .el-tabs__header {
  margin: 0 auto !important;
  width: 1200px;
}

>>> .el-tabs__nav {
  width: 311px;
  height: 40px;
  background: transparent !important;
  border-radius: 20px;
  text-align: center;
}
>>> .el-tabs__item.is-active {
  background: #0075ff;
  box-shadow: 0px 3px 8px 0px rgba(0, 117, 255, 0.2);
  border-radius: 20px;
}
>>> .el-tabs__item {
  width: 150px;
  height: 40px;
  color: #8995ad;
}
>>> .el-tabs__item.is-active {
  color: #ffffff;
}
</style>